<template>
    <div class="coo-list-wrap">
        <div class="panel flex-column ">
            <el-form :inline="true" class="filter-form" style="margin-bottom:20px;">
                <div class="form-content">
                    <el-form-item label="告警方式">
                        <el-select v-model="queryParams.publication_type" placeholder="请选择告警方式" clearable>
                            <el-option v-for="(val, key) in typeList" :key="key" :label="val" :value="key" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="选择时间">
                        <el-date-picker
                            v-model="queryParams.publication_date_start"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="开始时间"
                        />
                        <el-date-picker
                            v-model="queryParams.publication_date_end"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="结束时间"
                        />
                    </el-form-item>
                </div>
                <div>
                    <el-button @click="resetFilterForm()">重置</el-button>
                    <el-button type="primary" @click="getList(1)">查询</el-button>
                </div>
            </el-form>
        </div>
        <div class="panel table-container">
            <el-table v-loading="loading" :border="true" :data="tableData"  height="92%" :header-cell-style="{background:'#D8E8FF'}">
                <el-table-column type="index" label="序号" width="50" align="center" />
                <el-table-column prop="code" label="告警序号"  width="200" align="center" min-width="200" />
                <el-table-column prop="time" label="时间" width="240" align="center" />
                <el-table-column prop="user" label="操作用户" width="160" align="center" />
                <el-table-column prop="type" label="风险类别" width="200" align="center" />
                <el-table-column prop="level" label="风险级别" min-width="200" align="center">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.level==='高风险'" type="danger" size="small">{{scope.row.level}}</el-tag>
                        <el-tag v-if="scope.row.level==='中风险'" type="warning" size="small">{{scope.row.level}}</el-tag>
                        <el-tag v-if="scope.row.level==='低风险'" type="success" size="small">{{scope.row.level}}</el-tag>
                        <el-tag v-if="scope.row.level==='较低风险'" type="primary" size="small">{{scope.row.level}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="alarm" label="告警方式" width="160" align="center" />
                <el-table-column prop="content" label="告警内容"  width="280" align="center" min-width="200" />
                <el-table-column prop="remark" label="备注" min-width="120" align="center" />
            </el-table>
            <div class="pagination-container">
                <pagination-control
                    :paging-params="pagingParams"
                    @onCurrentPage="handleCurrentChange"
                    @onCurrentSize="handleSizeChange"
                />
            </div>
        </div>
    </div>
</template>

<script>
import * as echarts from "echarts";
import PaginationControl from "@/layout/paginationControl.vue"
  
export default {
    components: {
        PaginationControl,
    },
    data: function() {
        return {
            queryParams: {
            },
            typeList: {
                10: "all",
                20: "主机1",
                30: "主机2",
            },
            myChart: {},
            pieData: [
                {
                    value: 153,
                    name: "高风险",
                },
                {
                    value: 142,
                    name: "较高风险",
                },
                {
                    value: 495,
                    name: "中风险",
                },
                {
                    value: 148,
                    name: "低风险",
                },
                {
                    value: 2935,
                    name: "较低风险",
                },
            ],
            pieName: [],
            myChartStyle: {float: "left", width: "100%", height: "120px"},
            tableData: [
            {
                "time": "2024-10-20 15:53:32",
                "user": "root",
                "type": "敏感数据泄露",
                "level": "高风险",
                "alarm": "发送邮件",
                "code": "2024102011",
                "remark": "",
                "content": "root用户操作涉嫌风险，请查看",
            },
            {
                "time": "2024-10-20 15:53:52",
                "user": "root",
                "type": "敏感数据泄露",
                "level": "中风险",
                "alarm": "发送邮件",
                "code": "2024102012",
                "remark": "",
                "content": "root用户操作涉嫌风险，请查看",
            },
            {
                "time": "2024-10-20 15:58:32",
                "user": "root",
                "type": "权限滥用",
                "level": "高风险",
                "alarm": "短信",
                "code": "2024102013",
                "content": "root用户操作涉嫌风险，请查看",
                "remark": ""
            },
            {
                "time": "2024-10-20 16:53:32",
                "user": "root",
                "type": "敏感数据泄露",
                "level": "较低风险",
                "alarm": "推送通知",
                "code": "2024102014",
                "content": "root用户操作涉嫌风险，请查看",
                "remark": ""
            },
            {
                "time": "2024-10-20 19:53:32",
                "user": "root",
                "type": "敏感数据泄露",
                "level": "低风险",
                "alarm": "推送通知",
                "code": "2024102015",
                "content": "root用户操作涉嫌风险，请查看",
                "remark": ""
            },
            {
                "time": "2024-10-21 15:53:32",
                "user": "root",
                "type": "异常登录",
                "level": "高风险",
                "alarm": "短信",
                "code": "2024102016",
                "content": "root用户操作涉嫌风险，请查看",
                "remark": ""
            },
            {
                "time": "2024-10-22 15:53:32",
                "user": "root",
                "type": "异常登录",
                "level": "中风险",
                "alarm": "短信",
                "code": "2024102017",
                "content": "root用户操作涉嫌风险，请查看",
                "remark": ""
            },
            {
                "time": "2024-10-21 16:53:32",
                "user": "root",
                "type": "敏感数据泄露",
                "level": "较低风险",
                "alarm": "发送邮件",
                "code": "2024102018",
                "content": "root用户操作涉嫌风险，请查看",
                "remark": ""
            },
            {
                "time": "2024-10-21 16:53:52",
                "user": "root",
                "type": "权限滥用",
                "level": "中风险",
                "alarm": "短信",
                "code": "2024102019",
                "content": "root用户操作涉嫌风险，请查看",
                "remark": ""
            },
            {
                "time": "2024-10-21 17:58:32",
                "user": "root",
                "type": "敏感数据泄露",
                "level": "高风险",
                "alarm": "发送邮件",
                "code": "2024102011",
                "content": "root用户操作涉嫌风险，请查看",
                "remark": ""
            },
            {
                "time": "2024-10-21 15:58:59",
                "user": "root",
                "type": "敏感数据泄露",
                "level": "高风险",
                "alarm": "发送邮件",
                "code": "2024102011",
                "content": "root用户操作涉嫌风险，请查看",
                "remark": ""
            },
            {
                "time": "2024-10-22 9:53:32",
                "user": "root",
                "type": "敏感数据泄露",
                "level": "高风险",
                "alarm": "发送邮件",
                "code": "2024102011",
                "content": "root用户操作涉嫌风险，请查看",
                "remark": ""
            },
            {
                "time": "2024-10-22 10:53:32",
                "user": "root",
                "type": "敏感数据泄露",
                "level": "高风险",
                "alarm": "发送邮件",
                "code": "2024102011",
                "content": "root用户操作涉嫌风险，请查看",
                "remark": ""
            },
            {
                "time": "2024-10-22 11:53:32",
                "user": "root",
                "type": "敏感数据泄露",
                "level": "高风险",
                "alarm": "发送邮件",
                "code": "2024102011",
                "content": "root用户操作涉嫌风险，请查看",
                "remark": ""
            }
            ],
            pagingParams: {
                page: 1,
                size: 20,
                total: 14
            },
        }
    },
    mounted() {
        this.initData();
        this.initEcharts();
        this.getList();
    },
    methods: {
        initData() {
            for (let i = 0; i < this.pieData.length; i++) {
                this.pieName[i] = this.pieData[i].name;
            }
        },
        initEcharts() {
            const option = {
                legend: {
                    data: this.pieName,
                    left: "16%",
                    top: "0%",
                    orient: "vertical"
                },
                series: [
                    {
                        left: "16%",
                        type: "pie",
                        radius: ["40%","90%"],
                        data: this.pieData,
                        label: {
                            show: false,
                            // formatter: "{c}",
                            // position: "inner",
                        },
                        padAngle: 3,
                        itemStyle: {
                            borderRadius: 3,
                        }
                    }
                ],
                color: ["rgb(253, 61, 83)","rgb(224, 127, 128)","rgb(249,169,6)","#409EFF","rgb(77,195,21)"]
            };
            const optionFree = {
                xAxis: {},
                yAxis: {},
                series: [
                    {
                        data: this.seriesData,
                        type: "pie",
                        smooth: true
                    }
                ]
            };
            this.myChart = echarts.init(document.getElementById("mychart"));
            this.myChart.setOption(option);
        },
        resetFilterForm() {
            for (const key in this.queryParams) {
                this.queryParams[key] = '';
            }
            this.getList(1);
        },
        getList(isReset) {
            this.pagingParams.total = 3873;
        },
        handleCurrentChange(val) {
            this.pagingParams.page = val;
            this.getList();
        },
        handleSizeChange(val) {
            this.pagingParams.size = val;
            this.getList(1);
        },
    },
}
</script>

<style lang="less" scoped>
@import "~@/assets/css/scrollbar.css";
.coo-list-wrap {
	height: 100%;
	width: 100%;
    position: relative;
	.status {
		color: #c0ccda;
		margin-right: 8px;
		&.active {
			color: #13ce66;
		}
	}
    .table-container {
        position: absolute;
        left: 0;
        right: 0;
        top: 110px;
        bottom: 0;
        // margin-bottom: 20px;
        .el-table {
            font-size: 12px !important;
        }
    }
	.panel {
		box-shadow: 0 0 5px #ebe7e7;
		background-color: #fff;
		padding: 20px;
	}
	.filter-form {
		display: flex;
		align-items: center;
		.form-content {
			flex: 1;
			margin-right: 20px;
			margin-top: -6px;
			margin-bottom: -6px;
		}
	}
	::v-deep {
		.filter-form {
			.el-form-item {
				margin-bottom: 0;
				padding-top: 6px;
				padding-bottom: 6px;
                height: 32px;
			}
			.el-form-item__label {
				font-size: 12px;
				font-weight: normal;
                
			}
            .el-input--suffix .el-input__inner {
                height: 32px;
            }
        }
	}
}
.info-box {
    // border: 1px solid #bdc2c8;
    border-radius: 5px;
    height: 100px;
    margin-top: 15px;
    .title {
        color: #606266;
        margin-left: 30px;
        font-size: 15px;
        padding-top: 20px;
    }
    .content {
        font-weight: 600;
        margin-left: 30px;
        font-size: 24px;
        padding: 15px 0 10px 0;
    }
    .progress {
        padding: 5px 0 10px 0;
    }
}
.highest {
    background: rgb(254, 236, 238);
    .content {
        color: rgb(253, 61, 83);
    }
}
.higher {
    background: rgb(254,245,245);
    .content {
        color: rgb(224, 127, 128);
    }
}
.middle {
    background: rgb(255,246,231);
    .content {
        color: rgb(249,169,6);
    }
}
.lower {
    background: rgb(236,245,255);
    .content {
        color: #409EFF;
    }
}
.lowest {
    background: rgb(237,249,232);
    .content {
        color: rgb(77,195,21);
    }
}
.info {
    background: #EBEEF5;
    .content {
        color: #303133;
    }
}
.el-button {
    border-radius: 16px;
    font-size: 12px;
    padding: 9px 15px;
    &.el-button--primary.is-plain{
        color: #409EFF;
        background: #E9F2FF;
        border: 1px solid #C4E1FF;
    }
    &.el-button--danger.is-plain{
        color: #FF9D9D;
        background: #FDEEEE;
        border: 1px solid #FFD4D4;
    }
}
//表格内容颜色
::v-deep .el-table__body tbody tr:nth-child(odd) {
    background-color: #FFFFFF;
}
::v-deep .el-table__body tbody tr:nth-child(even) td {
    background-color: #F1F8FF;
}
//表头文字样式
::v-deep .el-table__header-wrapper {
    thead {
        th{
            div{
            // font-weight: 700;
            // font-size: 20px;
            color: #333333
            }
        }
    }
}
</style>